  <template>
  <div>
    <el-main>
      <el-row>
        <el-col class="fw_title">走访记录</el-col>
        <el-col class="fw_form">
          <el-row :gutter="20">
            <el-col :span="2" class="form_add">
              <el-button type="primary" round @click="handleClick(1)">新增 +</el-button>
            </el-col>
            <el-col :span="3">
              <el-select v-model="demand" placeholder="需求标签">
                <el-option v-for="item in demandLiat" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="3">
              <el-select v-model="enterprise" placeholder="企业标签">
                <el-option v-for="item in enterpriseLiat" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6" class="form_date">
              <el-col :span="11">
                <el-date-picker @change="a(date)" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                  v-model="date.date1" style="width: 100%;">
                </el-date-picker>
              </el-col>
              <el-col class="line" :span="2">---</el-col>
              <el-col :span="11">
                <el-date-picker @change="a(date)" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                  v-model="date.date2" style="width: 100%;">
                </el-date-picker>
              </el-col>
            </el-col>
            <el-col :span="2" :offset="2" class="form_output">
              <el-button type="primary" round>导出</el-button>
            </el-col>
            <el-col :span="6">
              <el-input placeholder="关键词搜索" v-model="search">
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col class="fw_table">
          <el-table @row-click="tableclick" :header-cell-style="{ backgroundColor: '#f6f4fc' }" :data="tableData"
            style="width: 100%">
            <el-table-column prop="name" label="企业名称" width="250">
            </el-table-column>
            <el-table-column prop="people" label="走访人员" width="150">
            </el-table-column>
            <el-table-column prop="startTime" label="走访时间" width="150">
            </el-table-column>
            <!--            <el-table-column prop="date" label="走访时间" width="100">-->
            <!--            </el-table-column>-->
            <el-table-column prop="enterprise" label="企业标签">
              <template slot-scope="scope">
                <div class="item_list" v-for="item in scope.row.enterprise" :key="item">
                  {{ item }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="demand" label="需求标签">
              <template slot-scope="scope">
                <div class="item_list item_demand" v-for="(item, index) in scope.row.demand" :key="index">
                  {{ item }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="解决状态" width="100">
              <template slot-scope="scope">
                <div :class="scope.row.state ? '' : 'state_r'">
                  {{ scope.row.state ? '已解决' : '未解决' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="solveTime" label="期望解决时间/已解决时间" width="250">
              <template slot-scope="scope">
                <div :class="scope.row.state ? '' : 'state_r'">
                  <div>{{ scope.row.solveTime }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <el-button @click.stop="tableclick(scope.row)" size="mini" round>查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-main>

    <WaitvisitDialog :addVisit="addVisit" :add_form="add_form" @close="close" @preservation="preservation">
    </WaitvisitDialog>

  </div>
</template>

<script>
import WaitvisitDialog from './components/WaitvisitDialog.vue'

export default {
  data() {
    return {
      addVisit: false,
      search: '',
      demand: '',
      demandLiat: [],
      enterprise: '',
      labelList: ['高新企业', '国家示范企业', '街道重点关注企业', '国家优势企业'],
      Visitpeoplelist: ['毛泽东', '江泽民'],

      add_form:
      {
        name: '',
        Visitdate1: '',
        Visitpeople: '',
        enterprise: []
      }
      ,
      enterpriseLiat: [],
      date: {
        date1: '',
        date2: ''
      },
      tableData: [{
        name: '广东美的制冷设备有限公司',
        people: '许文文、王乐乐',
        startTime: '2021-09-31',
        enterprise: ['高新企业', '国家示范企业', '街道重点关注企业'],
        demand: ['国内申请', '国内申请'],
        state: true,
        solveTime: '2021-12-31',
      }, {
        name: '广东美的制冷设备有限公司',
        people: '许文文、王乐乐',
        startTime: '2021-09-31',
        enterprise: ['高新企业', '国家示范企业', '街道重点关注企业'],
        demand: ['国内申请', '国内申请'],
        state: false,
        solveTime: '2021-12-31',
      },
      {
        name: '广东美的制冷设备有限公司',
        people: '许文文、王乐乐',
        startTime: '2021-09-31',
        enterprise: ['高新企业', '国家示范企业', '街道重点关注企业'],
        demand: ['国内申请', '国内申请'],
        state: false,
        solveTime: '2021-12-31',
      }]
    };
  },
  components: { WaitvisitDialog },
  mounted() {
    if (this.$route.query.time) {this.date.date1 = this.$route.query.time}
   
  },
  watch: {
    date: {
      handler(val) {
        // console.log(val, 'val')
      },
      deep: true
    }
  },
  methods: {
    a(data) {
      // console.log(data)
    },
    handleClick(row) {
      // console.log(row, 'row');
      this.addVisit = true
    },
    tableclick(row, column, event) {
      // console.log(row, column, event)
      this.$router.push('/workEnterprisevisit')
    },
    addvisit() {
      // console.log(123);
    },
    close() {
      this.addVisit = false
      this.empty()
    },
    preservation() {
      this.addVisit = false
      this.empty()
    },
    empty() {
      this.add_form = {
        name: '',
        time: '',
        Visitpeople: '',
        enterprise: []
      }
    },
  },
};
</script>

<style scoped lang="less">
.state_r {
  color: #FF5F58;
}

.button_from_i {
  min-width: 125px;
  height: 38px;
  line-height: 0px;
  font-size: 14px;
  color: #3377FF;
  background-color: #ebf2ff;
  border: 1px solid #387DFF;
}

.dialog-footer {
  button {
    padding: 5px 30px;
    width: 139px;
    height: 38px;
    background: #387DFF;
    border: 1px solid #E8ECEF;
    border-radius: 19px;
    font-size: 14px;
  }
}

.b_bule {
  /*display: inline-block;*/
  background-color: #D3E2FF;
  margin: 3px 5px;
  border-radius: 5px;
  padding: 5px 10px;
  color: #387DFF;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
}

::v-deep .el-table__row td:nth-child(6) .el-button {
  color: #23B899;
  background-color: #ecfaf7;
  border: none;
  font-size: 14px;
}

::v-deep input {
  border-radius: 38px;
  height: 38px;
  line-height: 38px;
}

::v-deep .el-input__icon {
  line-height: 38px;
  font-size: 16px;
}

::v-deep .has-gutter tr th:nth-child(2),
::v-deep .has-gutter tr th:nth-child(3),
::v-deep .has-gutter tr th:nth-child(8),
::v-deep .has-gutter tr th:nth-child(6),
::v-deep .has-gutter tr th:nth-child(7),
::v-deep tbody tr td:nth-child(2),
::v-deep tbody tr td:nth-child(3),
::v-deep tbody tr td:nth-child(8),
::v-deep tbody tr td:nth-child(7),
::v-deep tbody tr td:nth-child(6) {
  text-align: center;
}

::v-deep .has-gutter tr th {
  font-size: 14px;
  font-weight: initial;
  color: #334681;
}

.Visitdate {
  margin-top: 62px;
}

::v-deep tbody tr td {
  font-size: 14px;
  color: #334681;
}

::v-deep .el-table__row td:nth-last-child(1) .el-button {
  color: #23B899;
  background-color: #ecfaf7;
  border: none;
  width: 80%;
}

.el-main {
  margin-right: 15px;
  border-radius: 5px;
  margin: 25px 30px 0 30px;
}

.fw_title {
  font-weight: bolder;
  font-size: 24px;
}

.line {
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #ebeaed;
}

.fw_form {
  margin-top: 15px;

  .form_add {
    .el-button {
      height: 38px;
      line-height: 5px;
      background-color: #ebf2fd;
      color: #3377FF;
      font-size: 16px;
      border: 1px solid #387DFF;


    }

    // .el-button:hover {
    //   background-color: #ebf2fd;
    //   border: 1px solid #387DFF;
    //   color: #3377FF;
    // }
  }

  .form_output {
    .el-button {
      padding: 0px 35px;
      font-size: 16px;
      height: 38px;
      line-height: 5px;
      background-color: #387DFF;
    }

  }

  .form_date {
    div {
      padding-right: 0 !important;
      padding-left: 0 !important;
    }
  }
}

.fw_table {
  margin-top: 15px;

  .item_list {
    display: inline-block;
    background-color: #D3E2FF;
    margin: 3px 5px;
    border-radius: 5px;
    padding: 2px 5px;
    color: #387DFF;
  }

  .item_demand {
    color: #FF5F58;
    background-color: #FFF6F5;
  }
}

::v-deep .el-dialog {
  border-radius: 10px;
}

::v-deep .el-dialog__header {
  .el-dialog__title {
    font-size: 22px;
    font-weight: bolder;
  }

  .el-dialog__headerbtn {
    i {
      position: absolute;
      border: 3px solid #fff;
      top: -50px;
      left: 30px;
      color: #fff;
      border-radius: 30px;
      font-size: 24px;
      font-weight: bolder;
    }
  }
}

::v-deep .el-form-item {
  .el-form-item__label {
    font-size: 14px;
    font-weight: initial;
  }

  .el-form-item__content {
    .el-input__inner {
      border-radius: 5px;
    }
  }
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
